 <!-- Datatables -->
 <link href="cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
 <link href="/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet" />
 
 <!-- page content -->
 <div id="users" class="right_col" role="main">
 	<div class="">
 		<div class="page-title">
 			<div class="title_left">
 				<h3>Thymeleaf Index Page</h3>
 			</div>
 		</div>
 
 		<div class="clearfix"></div>
 
 		<div class="row">
 			<div class="col-md-12 col-sm-12">
 				<div class="x_panel">
 					<div class="x_title">
 						<h2>Users <small></small></h2>
 						<ul class="nav navbar-right panel_toolbox">
 							<li>
 								<a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
 							</li>
 							<li class="dropdown">
 								<a
 									href="#"
 									class="dropdown-toggle"
 									data-toggle="dropdown"
 									role="button"
 									aria-expanded="false"
 									><i class="fa fa-wrench"></i
 								></a>
 								<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
 									<a class="dropdown-item" href="#">Settings 1</a>
 									<a class="dropdown-item" href="#">Settings 2</a>
 								</div>
 							</li>
 							<li>
 								<a class="close-link"><i class="fa fa-close"></i></a>
 							</li>
 						</ul>
 						<div class="clearfix"></div>
 					</div>
 					<div class="x_content">
 						<div class="row">
 							<div class="col-sm-12">
 								<div class="card-box table-responsive">
									<button
											class="btn btn-primary"
											type="button"
											data-toggle="modal"
											data-target="#modalAdd"
											@click="initAddModel()">
										新增
									</button>
 									<table
 										id="datatable"
 										class="table table-striped table-bordered"
 										style="width: 100%">
 										<thead>
 											<tr>
 												<th>ID</th>
 												<th>User Name</th>
 												<th>Email</th>
 												<th type="password">Password</th>
 												<th>Operate</th>
 											</tr>
 										</thead>
 
 										<tbody></tbody>
 									</table>
 								</div>
 							</div>
 						</div>
 					</div>
 				</div>
 			</div>
 		</div>
 	</div>
	 <div th:replace="account/userAdd"></div>
	 <div th:replace="account/userEdit"></div>
 </div>
 
 <!-- Datatables -->
 <script src="/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
 <script src="/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
 
 <!-- /page content -->
 <script>
 	var modelsVue = new Vue({
 		el: "#users",
 		data: {
 			// 初始化分页页长
 			pageSize: 5,
 			// 定义表格数据结构
 			tableData: {
 				draw: 0,
 				recordsTotal: 0,
 				recordsFiltered: 0,
 				data: [],
 			},
			// 所有角色列表
			roles: [],
			user: {
				userName: "",
				email: "",
				password: "",
				// 当前用户设置的角色列表
				roles: [],
			},
 		},
 		methods: {
 			// 定义表格行数据结构
 			rowData: function (id, userName, email, password, userImage) {
 				var row = {};
 				row.id = id;
 				row.userName = userName;
 				row.email = email;
 				row.password = password;
 				row.userImage = userImage;
 				row.oprate = function () {
 					return (
					"<a href='#' class='btn_editcolor' data-toggle='modal' data-target='#modalEdit' " +
											"onclick='initEditModel(\"" +
											id +
											"\")'>编辑</a>&nbsp;" +
											"<a href='javascript:void(0);' onclick='deleteModel(\"" +
											id +
											"\")' class='btn_editcolor'>删除</a>"
 					);
 				};
 				return row;
 			},
 			// 初始化表格
 			initTable: function () {
 				var self = this;
 				$("#datatable").DataTable({
 					paging: true, //分页
 					serverSide: true, //开启后端分页
 					pagingType: "full_numbers", //分页样式的类型simple/simple_numbers/full/full_numbers
 					pageLength: this.pageSize, //定义初始的页长
 					processing: true,
 					destroy: true, //允许销毁替换，在表格重新查询时，可以自动销毁以前的data
 					lengthChange: true, //控制是否能够调整每页的条数
 					searching: true,
 					"data-show-refresh": true,
 					ordering: true,
 					autoWidth: false,
 					ajax: function (data, callback, settings) {
 						// 从data获取查询数据
 						var columIndex = data.order[0].column;
 						var direction = data.order[0].dir;
 						var orderBy = data.columns[columIndex].name;
 						pageSize = data.length == undefined ? pageSize : data.length;
 
 						var searchBean = {};
 						searchBean.currentPage = data.start / pageSize + 1;
 						searchBean.pageSize = pageSize;
 						searchBean.orderBy = orderBy;
 						searchBean.direction = direction;
 						searchBean.keyword = data.search.value;
 
 						$.ajax({
 							url: "/api/users",
 							type: "post",
 							contentType: "application/json",
 							data: JSON.stringify(searchBean),
 							success: function (rs) {
								console.log(rs);
 								if (!rs) {
 									layer.alert("请求出错，请稍后重试" + rs.errmsg, { icon: 2 });
 									callback(self.tableData);
 									return;
 								}
								console.log(rs.content)
 								if (rs.content == null) {
 									$("#moduleTable tbody tr").remove();
 									$("#loading").remove();
 									callback(self.tableData);
 									return;
 								}
 
 								$("#loading").remove();
 
 								var rowsData = [];
 								for (var i = 0; i <rs.content.length ; i++) {
 									//包装行数据
 									var rowData = self.rowData(
 										rs.content[i].id,
 										rs.content[i].userName,
 										rs.content[i].email,
 										rs.content[i].password,
 										rs.content[i].userImage
 									);
 
 									// 将行数据放到数组里
 									rowsData.push(rowData);
 								}
 								self.tableData.data = rowsData;
 								self.tableData.recordsTotal = rs.total;
 								self.tableData.recordsFiltered = rs.total;
 								callback(self.tableData);
 							},
 							error: function (data) {
 								layer.alert(data.responseText, { icon: 0 });
 							},
 						});
 					},
 					columns: [
 						//定义行数据字段
 						{ data: "id", name: "id", sortable: true },
 						{ data: "userName", name: "user_name", sortable: true },
 						{ data: "email", name: "email", sortable: true },
 						{ data: "password", name: "password", sortable: true },
 						{ data: "oprate", width: "80px", sortable: false },
 					],
 				});
 			},
			initRoles: function () {
				var self = this;
				$.ajax({
					url: "/api/roles",
					type: "get",
					// contentType: "application/json",
					// data: JSON.stringify(searchBean),
					success: function (rs) {
						self.roles = rs;
					},
					error: function (data) {
						layer.alert(data.responseText, { icon: 0 });
					},
				});
			},
			initAddModel: function () {
				this.user = {
					userName: "",
					email: "",
					password: "",
					roles: [],
				};
			},
			//插入数据
			insertModel: function () {
				if (
						this.user.userName == "" ||
						this.user.password == "" ||
						this.user.email == "" ||
						this.user.roles.size == 0
				) {
					layer.alert("Please inpu user info.", { icon: 0 });
					return;
				}

				this.user.roles = this.user.roles.map((item) => {
					var role = {};
					role.id = item;
					return role;
				});
				console.log(this.user);

				var self = this;
				$.ajax({
					url: "/api/user",
					type: "post",
					contentType: "application/json",
					data: JSON.stringify(self.user),
					success: function (rs) {
						if (rs.status == 200) {
							$("#modalAdd").modal("hide");
							self.initTable();
						} else {
							layer.alert(rs.message, { icon: 0 });
						}
					},
					error: function (data) {
						layer.alert(data.responseText, { icon: 0 });
					},
				});
			},
			
		 		initEditModel: function (id) {
		 				var self = this;
		 				$.ajax({
		 					url: "/api/user/" + id,
		 					type: "get",
		 					// contentType: "application/json",
		 					// data: JSON.stringify(self.user),
		 					success: function (rs) {
		 						self.user = rs;
								console.log(self.user)
		 						self.user.roles = self.user.roles.map((item) => {
		 							return item.id;
		 						});
		 					},
		 					error: function (data) {
		 						layer.alert(data.responseText, { icon: 0 });
		 					},
		 				});
		 			},
					//更新数据
		 			updateModel: function () {
		 				if (
		 					this.user.userName == "" ||
		 					this.user.password == "" ||
		 					this.user.email == "" ||
		 					this.user.roles.size == 0
		 				) {
		 					layer.alert("Please inpu user info.", { icon: 0 });
		 					return;
		 				}
		 
		 				this.user.roles = this.user.roles.map((item) => {
		 					var role = {};
		 					role.id = item;
		 					return role;
		 				});
		 				console.log(this.user);
		 
		 				var self = this;
		 				$.ajax({
		 					url: "/api/user",
		 					type: "put",
		 					contentType: "application/json",
		 					data: JSON.stringify(self.user),
		 					success: function (rs) {
		 						if (rs.status == 200) {
		 							$("#modalEdit").modal("hide");
		 							self.initTable();
		 						} else {
		 							layer.alert(rs.message, { icon: 0 });
		 						}
		 					},
		 					error: function (data) {
		 						layer.alert(data.responseText, { icon: 0 });
		 					},
		 				});
		 			},
					//删除数据
					//deleteModel
		 			deleteModel: function (id) {
		 				var self = this;
		 				bootbox.confirm("Are you sure?", function (result) {
		 					if (result) {
		 						$.ajax({
		 							url: "/api/user/" + id,
		 							type: "delete",
		 							success: function (rs) {
		 								if (rs.status == 200) {
		 									self.initTable();
		 								} else {
		 									layer.alert(rs.message, { icon: 0 });
		 								}
		 							},
		 							error: function (data) {
										
								         console.log(data)
		 			                      layer.alert(data.responseText, { icon: 0 });
		 							},
		 						});
		 					}
		 				});
		 			},
		 		},
		created: function () {
			window.initEditModel = this.initEditModel;
				window.deleteModel = this.deleteModel;
 		},
 		mounted: function () {
 			this.initTable();
			this.initRoles();
 		},
 	});
 </script>
